<template>
  <div class="content_box">
    <div class="main-box">
      <p class="main-title">修改办案预留银行卡</p>
      <p class="main-text">注：当事人信息一旦修改不可修改，日期请与文书一致后续可案件延期申请。</p>
      <el-form :model="form" :rules="rules" ref="updateForms">
        <el-form-item label="与本人关系" label-width="110px" prop="relationships_id">
          <el-select
            v-model="form.relationships_id"
            placeholder="请选择与本人关系"
            size="large"
            style="width: 90%"
          >
            <el-option
              v-for="item in list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        
        <el-form-item label="姓名" label-width="110px" prop="card_name">
          <el-input
            size="large"
            style="width: 90%"
            v-model="form.card_name"
            type="text"
            placeholder="请输入姓名"
          />
        </el-form-item>

        <el-form-item label="身份证号码" label-width="110px" prop="card_idcard">
          <el-input
            size="large"
            style="width: 90%"
            v-model="form.card_idcard"
            type="text"
            placeholder="请输入身份证号码"
          />
        </el-form-item>

        <el-form-item label="选择开户行" label-width="110px" required>
          <el-select
            style="width: 90%"
            size="large"
            v-model="changeValue"
            placeholder="请选择开户行"
            filterable
            @change="changeBank"
          >
            <el-option
              v-for="item in bankList"
              :key="item.label"
              :label="item.label"
              :value="item.label"
            />
          </el-select>
        </el-form-item>

        <el-form-item v-if="isQt" label="开户行名称" label-width="110px" prop="bank_id_name">
          <el-input
            size="large"
            style="width: 90%"
            placeholder="请输入开户行名称"
            v-model="form.bank_id_name"
          ></el-input>
        </el-form-item>

        <el-form-item label="支行名称" label-width="110px" prop="bank_name">
          <el-input
            size="large"
            style="width: 90%"
            placeholder="示例：xxx支行"
            v-model="form.bank_name"
          ></el-input>
        </el-form-item>

        <el-form-item label="银行账号" label-width="110px" prop="card_number">
          <el-input
            size="large"
            style="width: 90%"
            v-model="form.card_number"
            type="text"
            placeholder="请输入银行账号"
          />
        </el-form-item>

        <el-form-item label="手机号" label-width="110px" prop="card_mobile">
          <el-input
            size="large"
            style="width: 90%"
            v-model="form.card_mobile"
            type="text"
            placeholder="请输入手机号"
          />
        </el-form-item>

        <el-form-item label="备注" label-width="110px">
          <el-input
            style="width: 90%"
            v-model="form.notes"
            type="textarea"
            placeholder="请输入备注，文字不可超过500字"
          />
        </el-form-item>

        <el-form-item label="作证材料" label-width="110px" required>
          <div class="msg" v-if="fileArr.length">
            <div v-for="(item,index) in fileArr" :key="index">
              <div class="img" v-if="item.imagetype == 'pdf'">
                <svg-icon  name="pdf" color="red" width="100px" height="120px"></svg-icon>
                <p @click="del(index)"><el-icon size="18"><Delete /></el-icon></p>
              </div>

              <div class="img" v-if="item.imagetype == 'png'">
                <el-image 
                style="width: 100px; height: 120px;border-radius: 10px;"
                :src="item.url_new" 
                :preview-src-list="[item.url_new]"/>
                <p @click="del(index)"><el-icon size="18"><Delete /></el-icon></p>
              </div>
              <div class="up_msg">
                <p class="name">{{item.filename_alias?item.filename_alias:item.filename}}</p>
                <!-- <p class="text">渝公江北（经）取保字【2024】4号</p> -->
                <p class="time">{{item.uploadtime_text}}</p>
              </div>
            </div>
          </div>
          <p class="add" @click="fileVisible = true"><el-icon><Plus /></el-icon></p>
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button
          :loading="loading"
          :disabled="loading"
          type="primary"
          @click="submit"
        >
          提交
        </el-button>
      </div>
    </div>

    <!-- 加文件 -->
    <el-dialog width="65%" title="" v-model="fileVisible" >
      <update-file @submitFile="changeFileArr" @closeDrawer="closeFileVisible" :bailId="props.bailId" :groupId="1"></update-file>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref,defineProps, defineEmits,onMounted } from "vue";
import { ElNotification } from "element-plus";
import { getYlBank,saveBailBank } from "@/api/bond/pay";
import { getPublic,getBindAtt } from "@/api/public";

const props = defineProps({
  bailId: {
    type: Number,
  },
  id: {
    type: Number,
  },
});

let form = ref({
  process_id: props.id,
  bail_id:props.bailId,
  relationships_id:'',
  card_name:'',
  card_idcard:'',
  card_mobile:'',
  card_number:'',
  bank_name:'',
  notes:''
});

const emit = defineEmits(['closeDrawer']);

onMounted(() => {
  getPublicSource()

  getFile()

  getBankMsg()
});

// 获取公共数据
let list = ref([])
let bankList = ref([])
const getPublicSource = async()=>{
  await getPublic().then(res=>{
    if(res.code == 1){
      list.value = res.data.relationships
      bankList.value = res.data.bank_list
      bankList.value.push({
        label:'其他',
        value:0
      })
    }
  })
}

// 切换银行
let isQt = ref(false)
const changeBank = (e: any)=>{
  console.log(e)
  if(e == '其他'){
    isQt.value = true
    form.value.bank_id_name = ''
  }else{
    isQt.value = false
  }
  form.value.bank_name = ''
}

// 获取预留银行卡信息
let changeValue = ref('')
let formNew = ref({})
const getBankMsg = async()=>{
  await getYlBank({bail_id:props.bailId}).then(res=>{
    if(res.code == 1){
      if(res.data&&res.data.bank_name){
        changeValue.value = res.data.bank_id_name
        form.value = {
          process_id: props.id,
          bail_id:props.bailId,
          relationships_id:res.data.relation_ships.id,
          card_name:res.data.card_name,
          card_idcard:res.data.card_idcard,
          card_mobile:res.data.card_mobile,
          card_number:res.data.card_number,
          bank_name:res.data.bank_name,
          notes:res.data.notes,
        }
      }
      
    }
  })
}


/*=====提交=====*/
const updateForms = ref();
let loading = ref(false);
const rules = reactive({
  relationships_id: [
    { required: true, message: "请选择与本人关系", trigger: "change" },
  ],
  card_name: [
    { required: true, message: "请输入姓名", trigger: "blur" },
  ],
  card_idcard: [
    { required: true, message: "请输入身份证号码", trigger: "blur" },
  ],
  bank_name: [
    { required: true, message: "请输入支行名称", trigger: "blur" },
  ],
  card_number: [
    { required: true, message: "请输入银行账号", trigger: "blur" },
  ],
  card_mobile: [
    { required: true, message: "请输入手机号", trigger: "blur" },
  ],
  changeValue: [
    { required: true, message: "请选择开户行", trigger: "change" },
  ],
  bank_id_name: [
    { required: true, message: "请输入开户行名称", trigger: "blur" },
  ],
});

const submit = async () => {
  if(changeValue.value != '其他'){
    form.value.bank_id_name = changeValue.value
  }
  console.log(form.value);
  await updateForms.value.validate();
  loading.value = true;
  await saveBailBank(form.value).then((res) => {
    if (res.code == 1) {
      ElNotification({ message: res.msg, type: "success" });
      close()
    } else {
      loading.value = false;
      ElNotification.error(res.msg);
    }
  });
};

// 关闭
const close=()=>{
  form.value.relationships_id = ''
  form.value.card_name = ''
  form.value.card_idcard = ''
  form.value.card_mobile = ''
  form.value.card_number = ''
  form.value.bank_name = ''
  form.value.notes = ''
  loading.value = false
  setTimeout(() => {
    updateForms.value.clearValidate();
  }, 500);
  
  emit("closeDrawer");
}

// 获取上传文件
let fileArr = ref([])
let isFileArr = ref(false)
const getFile = async () => {
  let data = {
    bail_id: props.bailId,
    group_id:1
  }
  await getBindAtt(data).then((res) => {
    if (res.code == 1) {
      if(res.data.length){
        isFileArr.value = true
        res.data.map((item: {url_new: any; url: any; })=>{
          item.url_new = import.meta.env.VITE_APP_file_API+item.url
        })
        fileArr.value = res.data
        console.log(fileArr.value)
      }else{
        isFileArr.value = false
      }
    }
  });
};


// 获取文件
let fileVisible = ref(false)
const closeFileVisible = ()=>{
  fileVisible.value = false
}
const changeFileArr = (arr:any)=>{
  fileVisible.value = false
  getFile()
}

// 删除文件
const del = (index:any)=>{
  fileArr.value.splice(index,1)
}

// 删除默认文件
const oneDel = (index:any)=>{
  props.bailInfo.qbhsjds.bzj_daw_jyqk = ''
}
</script>
<style scoped lang="scss">
.dialog-footer {
  margin-top:50px;
  text-align: center;
}
.main-box{
  min-height: auto;
}
.main-text{
  margin:20px 0 47px 0;
  font-size: 14px;
  color: #323C4F;
}
.add{
  width: 100px;
  height: 100px;
  line-height: 100px;
  box-shadow:0 0 0 1px var(--el-input-border-color,var(--el-border-color)) inset;
  border-radius: 4px;
  text-align: center;
  color:#aaa;
  font-size: 30px;
  cursor: pointer;
}

.msg {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    &>div{
      display: flex;
    }
    .img{
      position: relative;
      border-radius: 10px;
      overflow: hidden;
      p{
        position: absolute;
        bottom:2px;
        right: 0;
        font-size:12px;
        width: 100%;
        height: 26px;
        background: #1F2E54;
        color:#fff;
        cursor: pointer;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .up_img {
      width: 100px;
      height: 120px;
    }
    .up_msg {
      line-height: 30px;
      text-align: left;
      margin-left: 12px;
      display: flex;
      flex-direction:column;
      justify-content: space-between;
      .name {
        color: #333333;
        font-size: 15px;
        font-weight: 500;
      }
      .text {
        font-size: 14px;
        color: #0046df;
        text-decoration: underline;
        cursor: pointer;
      }
      .time {
        color: #666666;
        font-size: 14px;
      }
    }
  }
</style>
  